<script setup>
import { computed, ref, reactive, onMounted } from 'vue'
import { deleteAdRequestService, getAllAdRequestService, passAdRequestService, refuseAdRequestService } from '@/api/ad'
import { ElMessage } from 'element-plus'

const formLabelWidth = '140px'

const tableData = reactive([])

//搜索列表内容
const search = ref('')
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase()) ||
            data.company.toLowerCase().includes(search.value.toLowerCase())
    )
)

async function getAdRequestList() {
    let result = await getAllAdRequestService()
    for (let i = 0; i < result.data.length; i++) {
        tableData.push(result.data[i])
    }
}
getAdRequestList()


//---------------删除---------------------
var tempAd = { company: '', name: '', id: 0 }
const deleteDialogVisible = ref(false)  //标记删除弹窗
//弹出确认删除弹窗
const handleDelete = (index, row) => {
    //清空tempUser
    tempAd = { company: '', name: '', id: 0 }
    tempAd = { company: row.company, name: row.name, id: row.id }
    // console.log(index, row)
    deleteDialogVisible.value = true
}
//确认删除执行
const deleteAdRequest = async () => {
    // console.log(tempUser.roomNumber)
    let result = await deleteAdRequestService(tempAd.id)
    if (result.data.code === 0) {
        // location.reload();
        ElMessage.success('删除成功')
        // userkey.value++
        tableData.length = 0
        getAdRequestList()
    } else {
        ElMessage.error(result.data.message)
    }
    deleteDialogVisible.value = false
}

const fullscreenLoading = ref(false)
const passDialogVisible = ref(false)
const handPass = async (index, row) => {
    tempAd = { company: '', name: '', id: 0 }
    tempAd = { company: row.company, name: row.name, id: row.id }
    // console.log(index, row)
    passDialogVisible.value = true
}
const passAdRequest = async () => {
    // console.log(tempUser.roomNumber)
    fullscreenLoading.value = true
    let result = await passAdRequestService(tempAd.id)
    fullscreenLoading.value = false
    ElMessage.success('申请已成功通过，将会以邮件的形式通知相关人')
    // userkey.value++
    tableData.length = 0
    getAdRequestList()
    passDialogVisible.value = false
}

const refuseDialogVisible = ref(false)
const handRefuse = async (index, row) => {
    tempAd = { company: '', name: '', id: 0 }
    tempAd = { company: row.company, name: row.name, id: row.id }
    // console.log(index, row)
    refuseDialogVisible.value = true
}
const refuseAdRequest = async () => {
    // console.log(tempUser.roomNumber)
    fullscreenLoading.value = true
    let result = await refuseAdRequestService(tempAd.id)
    fullscreenLoading.value = false
    ElMessage.warning('申请已成功否决，将会以邮件的形式通知相关人')
    // userkey.value++
    tableData.length = 0
    getAdRequestList()
    refuseDialogVisible.value = false
}


const classObje = (status) => {
    if (status === 2) {
        return { color: "red" }
    } else if (status === 0) {
        return { color: "lightgray" }
    } else if (status === 1) {
        return { color: "#13ce66" }
    }
}
</script>



<template>
    <div style="width: 100%;padding:25px;">
        <div style="display: flex;padding-bottom: 20px;padding-top: 10px;">
            <el-input v-model="search" placeholder="搜索相关广告入驻申请" style="width: 200px;margin-left:100vh;" />
        </div>
        <el-table :data="filterTableData" border stripe style="min-width:calc(100vh - 200px)">
            <el-table-column label="ID" prop="id" width="70px" sortable />
            <el-table-column label="公司" prop="company" sortable />
            <el-table-column label="姓名" prop="name" sortable width="120px" />
            <el-table-column label="电子邮箱" prop="email" />
            <el-table-column label="手机号" prop="phoneNumber" />
            <el-table-column label="广告描述" prop="adDetail" />
            <el-table-column label="审核状态" prop="status" width="90px">
                <template #default="scope">
                    <span :style="classObje(scope.row.status)">
                        <!-- <i :class="scope.row.status === 0 ? '未审核' : scope.row.status === 1 ? '已通过' : '未通过' "></i>
                        {{ scope.row.status }} -->
                        <i v-if="scope.row.status === 0">待审核</i>
                        <i v-if="scope.row.status === 1">已通过</i>
                        <i v-if="scope.row.status === 2">未通过</i>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width='200px'>
                <template #default="scope">
                    <el-button v-if="scope.row.status === 0" size="small" @click="handPass(scope.$index, scope.row)"
                        style="color:#13ce66 ;">通过</el-button>
                    <el-button v-if="scope.row.status === 0" size="small" @click="handRefuse(scope.$index, scope.row)"
                        style="color:red ;">否决</el-button>
                    <el-button v-if="scope.row.status !== 0" size="small" disabled
                        style="color:lightgray ;">通过</el-button>
                    <el-button v-if="scope.row.status !== 0" size="small" disabled
                        style="color:lightgray ;">否决</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 删除弹窗 -->
    <el-dialog v-model="deleteDialogVisible" title="删除申请记录" width="30%">
        <span>确认要 删除 {{ tempAd.company }}---{{ tempAd.name }} 的这条申请吗？</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="deleteDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="deleteAdRequest">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 通过弹窗 -->
    <el-dialog v-model="passDialogVisible" title="通过申请" width="30%">
        <span>确认要 通过 {{ tempAd.company }}---{{ tempAd.name }} 的这条申请吗？</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="passDialogVisible = false">取消</el-button>
                <el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="正在发送邮件"
                    @click="passAdRequest">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 否决弹窗 -->
    <el-dialog v-model="refuseDialogVisible" title="否决申请" width="30%">
        <span>确认要 否决 {{ tempAd.company }}---{{ tempAd.name }} 的这条申请吗？</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="refuseDialogVisible = false">取消</el-button>
                <el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="正在发送邮件"
                    @click="refuseAdRequest">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
